<template>
  <div class="cooperation">
    <img src="../assets/image/cooperation/icon_hzBanner.png" alt="">
    <div class="container">
      <div class="left">
        <div class="image">
          <img src="../assets/image/cooperation/TRADITIONAL MODE.png" alt="">
        </div>
        <div class="text">
          <div><p>传统模式</p><p>TRADITIONAL MODE</p></div>
          <p>人工成本高</p>
          <p>收费漏洞多</p>
          <p>出入口拥堵</p>
          <p>车位易闲置</p>
          <p>用户体验感差</p>
        </div>
      </div>
      <div class="right">
        <div class="text">
          <div><p>任意停车</p><p>ZOEEASY PARKING</p></div>
          <p>运营成本低</p>
          <p>通行速度快</p>
          <p>无感支付快速便捷</p>
          <p>导航等特色功能多体验感好</p>
          <p>利用平台导流转化率高</p>
        </div>
        <div class="image">
          <img src="../assets/image/cooperation/ryparking.png" alt="">
        </div>
      </div>
    </div>
    <div class="container1">
      <indicator-arrow :title="'商业合作'"></indicator-arrow>
      <div class="left">
        <img src="../assets/image/cooperation/icon_city.png" alt="">
        <div class="text">
          <p>为停车场创造商业合作机会</p>
          <p>为国内停车行业创造商业价值</p>
          <button>市场合作</button>
        </div>
      </div>
      <div class="right">
        <div class="text">
          <p>欢迎停车管理商或经营者垂询</p>
          <p>一站式运营管理体系支持</p>
          <button>合作招商</button>
        </div>
        <img src="../assets/image/cooperation/hz.png" alt="">
      </div>
    </div>
    <div class="container2">
      <indicator-arrow :title="'广告投放'"></indicator-arrow>
      <img src="../assets/image/cooperation/adBox.png" alt="">
      <div class="adBox">
        <div class="introduce">
          <img src="../assets/image/cooperation/icon_company.png" alt="">
          <div>
            <img src="../assets/image/cooperation/icon_add.png" alt="">
            <p>浙江省杭州市富阳区春秋北路591号二楼</p>
          </div>
          <div>
            <img src="../assets/image/cooperation/icon_tel.png" alt="">
            <p>4008-872-866</p>
          </div>
          <div>
            <img src="../assets/image/cooperation/icon_mail.png" alt="">
            <p>service@zoeeasy.com</p>
          </div>
        </div>
        <div class="form">
          <div>
            <button @click="reset1" :class="coop ? 'active fl' : 'fl' ">商业合作</button>
            <button @click="reset2" :class="ad ? 'active fl' : 'fl' ">广告投放</button>
          </div>
          <div class="reg">
            <form v-show="coop" id="coopRegEXP">
              <div>
                <div><p>*</p>姓名</div><input type="text" form="coopRegEXP" v-model="coopUserName">
                <p v-show="coopUserNameErr">{{userNameErr}}</p>
              </div>
              <div>
                <div><p>*</p>电话</div><input type="text" form="coopRegEXP" v-model="coopTell"> 
                <p v-show="coopTellErr">{{tellErr}}</p>
              </div>
              <div>
                <div>邮箱</div><input type="text" form="coopRegEXP" v-model="coopMail"> 
              </div>
              <div>
                <div>公司名称</div><input type="text" form="coopRegEXP" v-model="coopCompany"> 
              </div>
            </form>
            <form v-show="ad" id="adRegEXP">
              <div>
                <div><p>*</p>姓名</div><input type="text" form="adRegEXP" v-model="adUserName">
                <p v-show="adUserNameErr">{{userNameErr}}</p>
              </div>
              <div>
                <div><p>*</p>电话</div><input type="text" form="adRegEXP" v-model="adTell"> 
                <p v-show="adTellErr">{{tellErr}}</p>
              </div>
              <div>
                <div>邮箱</div><input type="text" form="adRegEXP" v-model="adMail"> 
              </div>
              <div>
                <div>广告名称</div><input type="text" form="adRegEXP" v-model="adCompany"> 
              </div>
            </form>
          </div>
          <div class="subButton">
            <button @click="submitForm">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indicatorArrow from "../components/indicatorArrow.vue";

export default {
  data() {
    return {
      coopUserNameErr: false,
      coopTellErr: false,
      adUserNameErr: false,
      adTellErr: false,
      userNameErr: undefined,
      tellErr: undefined,
      coop: true,
      ad: false,
      coopUserName: undefined,
      coopTell: undefined,
      coopMail: undefined,
      coopCompany: undefined,
      adUserName: undefined,
      adTell: undefined,
      adMail: undefined,
      adCompany: undefined
    }
  },
  components: {indicatorArrow},
  methods: {
    reset1() {
      this.coop = true
      this.ad = false
      this.coopUserNameErr = false,
      this.coopTellErr = false,
      this.coopUserName = undefined
      this.coopTell = undefined
      this.coopMail = undefined
      this.coopCompany = undefined
    },
    reset2() {
      this.coop = false
      this.ad = true
      this.adUserNameErr = false,
      this.adTellErr = false,
      this.adUserName = undefined
      this.adTell = undefined
      this.adMail = undefined
      this.adCompany = undefined
    },
    submitForm() {
      let list = new Object
      let phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      console.log()
      if (this.coop) {
        if (!this.coopUserName) {this.coopUserNameErr = true;this.userNameErr = '请输入姓名'} else {this.coopUserNameErr = false}
        if (this.coopTell == "" || !this.coopTell) {
          this.coopTellErr = true
          this.tellErr = '请输入手机号'
        } else if (!phoneReg.test(this.coopTell)) {
          this.coopTellErr = true
          this.tellErr = '请填写正确手机号'
        } else {
          this.coopTellErr = false
        }
        list = {
          coopUserName: this.coopUserName,
          coopTell: this.coopTell,
          coopMail: this.coopMail,
          coopCompany: this.coopCompany
        }
        console.log('商业合作:',list)
      } else {
        if (!this.adUserName) {this.adUserNameErr = true;this.userNameErr = '请输入姓名'} else {this.adUserNameErr = false}
        if (this.adTell == "" || !this.adTell) {
          this.adTellErr = true
          this.tellErr = '请输入手机号'
        } else if (!phoneReg.test(this.adTell)) {
          this.adTellErr = true
          this.tellErr = '请填写正确手机号'
        } else {
          this.adTellErr = false
        }
        list = {
          adUserName: this.adUserName,
          adTell: this.adTell,
          adMail: this.adMail,
          adCompany: this.adCompany
        }
        console.log('商业合作:',list)
      }
    }
  },
  created(){

  },
  mounted(){

  }
}
</script>

<style lang="scss" scoped>
.cooperation {
  margin-top: 80px;

  > img {
    width: 100%;
  }

  > .container {
    width: 100%;
    text-align: center;
    margin-top: 84px;
    margin-bottom: 74px;

    > .left {
      > .text {
        display: inline-block;
        text-align: left;
        > div {
          margin-top: 62px;
          margin-bottom: 27px;
          > p:nth-child(1) {
            color: #3D3D5A;
            font-size: 36px;
            display: inline-block;
            margin-right: 14px;
          }
          > p:nth-child(2) {
            color: #3D3D5A;
            display: inline-block;
            font-size: 18px;
          }
        }

        > p {
          margin-bottom: 22px;
          font-size: 16px;
          color: #6F7998;
        }
      }
      .image {
        display: inline-block;
        background-color: rgba(0, 183, 238, 0.2);
        // opacity: 0.2;
        width: 388px;
        height: 388px;
        vertical-align: top;
        margin-right: 265px;

        > img {
          vertical-align: top;
          width: 388px;
          height: 388px;
          opacity: 1;
        }
      }
    }

    > .right {
      margin-top: 43px;
      > .text {
        display: inline-block;
        text-align: left;
        margin-right: 185px;
        > div {
          margin-top: 62px;
          margin-bottom: 27px;
          > p:nth-child(1) {
            color: #3D3D5A;
            font-size: 36px;
            display: inline-block;
            margin-right: 14px;
          }
          > p:nth-child(2) {
            color: #3D3D5A;
            display: inline-block;
            font-size: 18px;
          }
        }

        > p {
          margin-bottom: 22px;
          font-size: 16px;
          color: #6F7998;
        }
      }
      .image {
        display: inline-block;
        background-color: rgba(0, 183, 238, 0.2);
        // opacity: 0.2;
        width: 646px;
        height: 336px;
        vertical-align: top;
        padding: 7px;
        // margin-left: 185px;

      }
    }
  }

  > .container1 {
    width: 100%;
    text-align: center;
    background-color: #fafafa;
    padding-bottom: 47px;

    > .left {
      margin-top: 75px;
      img {
        width: 588px;
        height: 340px;
        margin-right: 177px;
      }
      > .text {
        display: inline-block;
        text-align: left;
        vertical-align: middle;

        > p:nth-child(1) {
          font-size: 28px;
          margin-bottom: 21px;
        }
        > p:nth-child(2) {
          font-size: 20px;
          color: #666666;
          margin-bottom: 33px;
        }

        > button {
          border: none;
          width: 140px;
          height: 40px;
          border-radius: 20px;
          background-color: #3296FA;
          color: #FFFFFF;
          font-size: 20px;
          &:hover {
            opacity: 0.2;
          }
        }
      }
    }
    > .right {
      margin-top: 75px;
      img {
        width: 588px;
        height: 340px;
        margin-left: 177px;
      }
      > .text {
        display: inline-block;
        text-align: right;
        vertical-align: middle;

        > p:nth-child(1) {
          font-size: 28px;
          margin-bottom: 21px;
        }
        > p:nth-child(2) {
          font-size: 20px;
          color: #666666;
          margin-bottom: 33px;
        }

        > button {
          border: none;
          width: 140px;
          height: 40px;
          border-radius: 20px;
          background-color: #3296FA;
          color: #FFFFFF;
          font-size: 20px;
          &:hover {
            opacity: 0.2;
          }
        }
      }
    }
  }

  > .container2 {
    text-align: center;
    padding-bottom: 63px;

    > img {
      margin-top: 53px;
      margin-bottom: 58px;
    }

    > .adBox {
      display: inline-block;
      width: 1200px;
      height: 500px;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(98, 149, 226, 0.2);
      padding: 26px 80px 0px 44px;

      > .introduce {
        display: inline-block;
        margin-right: 86px;
        > img {
          margin-bottom: 26px;
        }
        > div { 
          text-align: left;
          margin-bottom: 15px;
          > img {
            border: 1px dashed;
            margin-right: 11px;
          }
          > p {
            display: inline-block;
          }
        }
      }

      > .form {
        display: inline-block;
        vertical-align: top;
        
        > div {
          > button {
            width: 120px;
            padding: 0px;
            height: 50px;
            border: none;
            box-sizing: border-box;
            color: #888888;
            background-color: #fff;
            margin-right: 60px;
            font-size: 18px;
            border-radius: 5px;
            &:hover {
              color: #fff;
              background-color: #b1eafc;
            }
          }
          .active {
            color: #fff;
            background-color: #b1eafc;
            border-bottom: 1px solid #3296FA;
          }
        }

        > .reg {
          margin-top: 20px;
          width: 460px;
          
          > form {

            > div {
              border-bottom: 1px solid #EEEEEE;
              box-sizing: border-box;

              > p {
                color: red;
                border-bottom: 0.5px solid red;
                text-align: left;
                font-size: 10px;
                height: 15px;
              }

              > input {
                display: inline-block;
                width: 376px;
                height: 66px;
                border: none;
                box-sizing: border-box;
                padding: 0px;
              }
              > div {
                text-align: left;
                line-height: 66px;
                width: 84px;
                height: 66px;
                display: inline-block;
                box-sizing: border-box;
                color: #888888;
                > p {
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  color: red;
                  margin-right: 5px;
                }
              }
            }
          }
        }

        > .subButton {
          > button {
            margin-top: 38px;
            border: none;
            background-color: #00B7EE;
            color: #ffffff;
            width: 160px;
            height: 50px;
            border-radius: 5px;
            &:hover {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}
</style>